<template>
  <div class="main-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      @click="handelAddDomain"
    >
      添加
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <el-table-column label="域名" prop="domain" />
      <el-table-column label="注册时间" prop="register_date" />
      <el-table-column label="过期时间" prop="expire_date" />
      <el-table-column :label="$t('创建时间')" prop="create_time" />
      <el-table-column label="提示" prop="hint" />
      <el-table-column
        :label="$t('操作')"
        width="150px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="handelAddDomain(scope.row)" />
          <UpdateBtn
            @click="handleUpdate(scope.row)"
            tips-content="更新Whois"
          />
          <DelBtn
            @success="handleDelete(scope.row)"
            confirm-content="您确定要删除该域名?"
          />
        </template>
      </el-table-column>
    </BaseTable>

    <EditDomain
      :domain-info="domainInfo"
      :dialog-show.sync="dialogShow"
      @success="getListData"
    />
  </div>
</template>

<script>
import domainApi from '@/api/domain'
import EditDomain from './EditDomain.vue'
export default {
  components: {
    EditDomain
  },
  data() {
    return {
      request: domainApi.domainList,
      dialogShow: false,
      domainInfo: {}
    }
  },
  methods: {
    async handleUpdate(row) {
      const res = await domainApi.updateDomain({ id: row.id })
      if (res.code == 0) {
        this.$message.success(res.msg)
      }
    },
    handelAddDomain(row) {
      if (row.id) {
        this.domainInfo = row
      } else {
        this.domainInfo = {}
      }
      this.dialogShow = true
    },
    getListData(type) {
      this.$refs.baseTable.getList(type)
    },
    async handleDelete(row) {
      const res = await domainApi.deleteDomain({ id: row.id })
      if (res.code == 0) {
        this.getListData()
        this.$message.success(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scope></style>
